<template>
    <div>
        <!-- 查询 -->
        <div class="emp_top">
            <p>
                检测人员姓名: <el-input v-model="sou.stuName" style="width: 150px" placeholder="输入姓名" />
            </p>
            <p>检测区域:<el-select v-model="sou.bourn" placeholder="选择区域" size="large" style="width: 140px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </p>
            <p>环境监测: <el-select v-model="sou.switch" placeholder="选择状态" size="large" style="width: 140px">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </p>

            <p>用水监测:
                <el-select v-model="sou.expertiseName" placeholder="请选择城市" size="large" style="width: 140px">
                    <el-option v-for="item in city" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </p>

        </div>
        <!-- 按钮 -->
        <div class="btn">
            <p>
                <el-button type="primary" @click="query()">查询</el-button>
            </p>
            <el-button type="primary" @click="add()">新增检测人员</el-button>
            <el-button type="primary" @click="delAll">批量删除</el-button>
        </div>

        <!-- table -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="stuNo" label="id" width="180" />
            <el-table-column prop="stuName" label="检测人员" width="180" />
            <el-table-column prop="image" label="检测实时图">
                <template #default="scope">
                    <img :src="scope.row.image" alt="Image" style="width: 100px; height: auto;" />
                </template>
            </el-table-column>
            <el-table-column prop="bourn" label="检测区域" />
            <el-table-column prop="switch" label="环境检测状态">
                <template #default="scope">
                    <el-switch v-model="scope.row.switch" active-text="良好" inactive-text="极差" inline-prompt />
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="180">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="look(scope.row)">
                        查看
                    </el-button>
                    <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>

                    <!-- 删除确认框 -->
                    <el-popconfirm title="您确定删除吗?" @confirm="del(scope.row)" confirm-button-text="确定"
                        cancel-button-text="取消">
                        <template #reference>
                            <el-button type="primary" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                    <!-- <el-button link type="primary" size="small" @click="del(scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <!-- 弹出框 -->
        <el-dialog v-model="dialogFormVisible" :title=title width="500" >
            <el-form :model="form" :disabled="formdisabled">
                <el-form-item label="检测人员名称" :label-width="formLabelWidth">
                    <el-input v-model="form.stuName" autocomplete="off" />
                </el-form-item>
                <el-form-item label="检测区域" :label-width="formLabelWidth">
                    <el-input v-model="form.bourn" autocomplete="off" />
                </el-form-item>
                <el-form-item label="检测状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.switch" active-text="良好" inactive-text="极差" inline-prompt />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang='ts'>
import { getzhineng } from '../request/api';
import { ref, reactive, onMounted } from 'vue'
interface Soutype {
    stuName: string;
    bourn: string;
    stuNo: number | null;
    image?: string;
    expertiseName?: string;
    switch: boolean | null
}
interface Formtype {
    stuName: string;
    bourn: string;
    stuNo: number | null;
    image?: string;
    expertiseName?: string;
    switch: boolean | null;
    idd?: number | null

}

const formdisabled=ref(false)
const title = ref('')
const tableData = ref([])
onMounted(() => {
    // 获取数据列表
    getzhineng().then(res => {
        // console.log(res,'students1')
        tableData.value = res.data.data.result[0].list
        // console.log(tableData.value, 'students')
    })
})

const sou = reactive<Soutype>({
    stuName: '',
    bourn: '',
    stuNo: null,
    image: '',
    expertiseName: '',
    switch: null
})

// 检测区域
const options = [
    {
        value: '报告厅',
        label: '报告厅',
    },
    {
        value: '2号教学楼',
        label: '2号教学楼',
    },
    {
        value: '18号宿舍楼',
        label: '18号宿舍楼',
    },
    {
        value: '1号教学楼',
        label: '1号教学楼',
    },
    {
        value: '2号食堂',
        label: '2号食堂',
    },
    {
        value: '操场',
        label: '操场',
    },
    {
        value: '播音室',
        label: '播音室',
    },
    {
        value: '保安室',
        label: '保安室',
    },
    {
        value: '停车场',
        label: '停车场',
    },
]
// 环境监测
const options1 = [
    {
        value: '良好',
        label: '良好',
    },
    {
        value: '极差',
        label: '极差',
    }
]

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive<Formtype>({
    stuName: '',
    bourn: '',
    stuNo: null,
    image: '',
    expertiseName: '',
    switch: null
})

// 搜索
const query=()=>{

}

// 查看
const look = (row: Formtype) => {
    title.value = '查看'
    dialogFormVisible.value = true;
    form.stuName = row.stuName;
    form.bourn = row.bourn;
    form.stuNo = row.stuNo;
    form.switch=row.switch;
    // 表单禁用
    formdisabled.value = true
}
// 删除
const del=(row:any)=>{
//    console.log(row.stuNo)
   let aaIndex=tableData.value.filter(item=>item.stuNo==row.stuNo)
   console.log(aaIndex)

   tableData.value.splice(aaIndex,1)
}
// 批量删除
const delAll = () => {
    
}
// 添加
const add = () => {
    dialogFormVisible.value = true
    formdisabled.value = false
    title.value = '添加'
    form.stuName = '';
    form.bourn = '';
    // form.stuNo = null;
    form.image = 'https://tse1-mm.cn.bing.net/th/id/OIP-C.osS_5m0S3zZy4yJMOMeslQHaE8?pid=ImgDet&rs=1';
    form.switch=null
}

// 编辑
const edit=(row:any)=>{
    dialogFormVisible.value = true
    formdisabled.value = false
    title.value = '编辑'
    form.stuName = row.stuName;
    form.bourn = row.bourn;
    form.stuNo = row.stuNo;
    form.image = row.image;
    form.switch=row.switch
}
const submit = () => {
    dialogFormVisible.value = false
    console.log(form)
    if (title.value == '添加') {
       let aa=[{
        stuName: form.stuName,
        bourn: form.bourn,
        // stuNo: null,
        image: form.image,
        switch: form.switch
       }]

       getzhineng().then(res => {
        tableData.value = res.data.data.result[0].list
        tableData.value.unshift(...aa)
    })
    }else if(title.value='编辑'){
        let aaIndex=tableData.value.findIndex(item=>item.stuNo==form.stuNo)
       tableData.value[aaIndex]=form
    }
}

</script>

<style scoped lang="scss">
.emp_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    width: 80%;
    // background-color: pink;
}

.btn {
    margin-bottom: 10px;
}
</style>